<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>ueditor demo</title>
        <style>
            .brandItem{
                width: 100%;
                box-sizing: border-box;
                border-radius: 6px;
                border:1px solid rgba(131, 129, 129, 0.322);
                box-shadow: rgba(92, 125, 125,0.4) 0px 0px 2px;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
            }
            .brandItem .brand-item-left{
                display: flex;
            }

            .serch-main-left-imgbox{
                width: 180px;
                height: 140px;
                margin: 20px 0;
            }

            .brandItem .serch-main-left-imgbox a img {
                width: 100%;
                height: 100%;
                border-radius: 6px;
                border: 1px solid #eaeaea;
            }

             .brandItem .serch-main-left-des {
                width: 560px;
                margin-left: 30px;
            }
            .brandItem .serch-main-left-des .heard{
                display: flex;
            }

             .brandItem .serch-main-left-des .heard h4{
                font-size: 18px;
                margin: 10px 10px;
                color: #333;
            }

            .brandItem .serch-main-left-des .heard .status{
                font-size: 12px;
                line-height: 16px;
                height: 16px;
                margin-top: 10px;
                border-radius: 4px;
                border:1px solid cornflowerblue;
                padding: 2px 8px;
            }
            .font-color-red{
                color: red;
            }
            .font-color-blue{
                color: blue;;
            }
             .brandItem .serch-main-left-des .serch-main-left-title {
                font-size: 13px;
                line-height: 16px;
                height: 16px;
            }

             .brandItem .serch-main-left-des .serch-main-left-title .red {
                padding: 2px 8px;
                color: #d63c42;
                background-color: #fde0e2;
                margin-right: 6px;
                border-radius: 2px;
            }

             .brandItem .serch-main-left-des .serch-main-left-title .orange {
                padding: 2px 8px;
                color: #fe8d18;
                background-color: #ffe8d1;
                margin-right: 6px;
                border-radius: 2px;
            }

             .brandItem .serch-main-left-des dl dt {
                float: left;
                width: 60%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

             .brandItem .serch-main-left-des dl {
                overflow: auto;
                font-size: 14px;
                line-height: 18px;
            }

             .brandItem .serch-main-left-des dl span {
                color: #666;
            }

             .brandItem .serch-main-left-des dl dd {
                float: right;
                width: 30%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
             .brandItem .serch-main-left-des dl em {
                color: #999;
            }

             .brandItem .serch-main-left-des dl span {
                color: #666;
            }

             .brandItem .serch-main-left-des p {
                margin-top: 10px;
                font-size: 14px;
                clear: both;
                color: #999;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

             .brandItem .serch-main-left-right {
                width: 130px;
            }

             .brandItem .serch-main-left-right .p1 {
                color: #c1292e;
            }

             .brandItem .serch-main-left-right .p1 span {
                font-size: 20px;
                font-weight: 400;
                margin: 0 3px;
            }

             .brandItem .serch-main-left-right .p2 {
                margin-top: 10px;
            }

             .brandItem .serch-main-left-right .p2 a {
                display: block;
                width: 60px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                color: #757575;
                border-radius: 4px;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="brandList ">
            <!-- 列表部分 -->
            <div class="brandItem">
                <div class="brand-item-left">
                    <div class="serch-main-left-imgbox">
                        <a href="">
                            <img width="204" height="162" src="./image/serch/01.png" alt="">
                        </a>
                    </div>
                    <div class="serch-main-left-des">
                        <div class="heard">
                            <h4>穿行及成都老火锅</h4>
                             <span class="status font-color-blue">待审核</span>
                        </div>
                      
                            <div class="serch-main-left-title">
                                <span class="red">老火锅</span>
                                <span class="orange">小吃</span>
                            </div>
                        <dl>
                            <dt>
                                <em>公司名称：</em>
                                <span>穿行及成都老火锅</span>
                            </dt>

                            <dd>
                                <em>门店数量</em>
                                <span>88家</span>
                            </dd>
                        </dl>

                        <dl>
                            <dt>
                                <em>所属行业</em>
                                <span>老火锅</span>
                            </dt>
                            <dd>
                                <em>咨询人数</em>
                                <span>8人</span>
                            </dd>
                        </dl>

                        <p>川行记成都老火锅好不好？它为每一位顾客奉上健康安全的美食，给每一位顾客与众不同的就餐体验，川行记成都老火锅将用一种全新的方式，掀起火锅界的狂潮。</p>
                    </div>
                </div>

                <div class="serch-main-left-right">
                    <p class="p1">￥ <span>10-20</span> 万</p>
                    <p class="p2">
                        <a href="#">编辑</a>
                        <a href="#">删除</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>